<template>
	<Form ref="myform" :model="form" :rules="rules" :label-width="100">
		<Row :gutter="10">
			<Col :span="20">
			<FormItem label="栏目1" prop="name">
				<Input v-model="form.name" placeholder="请输入姓名"></Input>
			</FormItem>
			</Col>
			<Col :span="20">
			<FormItem label="栏目2" prop="age">
				<Input v-model="form.age" placeholder="请输入年龄"></Input>
			</FormItem>
			</Col>
			<Col :span="20">
			<FormItem label="栏目4" prop="name">
				<Input v-model="form.name2" placeholder="请输入年龄2"></Input>
			</FormItem>
			</Col>
		</Row>
		<Row>
			<FormItem label="栏目3" :prop="prop">
				<Input v-model="form.other" placeholder="请输入其他1" v-if="prop == 'other'"></Input>
				<Input v-model="form.other2" placeholder="请输入其他2" v-if="prop == 'other2'"></Input>
			</FormItem>
		</Row>
	</Form>
	<Row style="margin-top:10px;" :gutter="10">
		<Col>
		<Button type="primary" @click="changeProp">操作1</Button>
		</Col>
		<Col>
		<Button type="primary" @click="add">操作</Button>
		</Col>
	</Row>
	<Form ref="myform2" :model="form2" :rules="rules2" inline>
		<FormItem :label="form2.name.label" prop="name.value" :rules="form2.name.rule">
			<Input v-model="form2.name.value" :placeholder="form2.name.placeholder"></Input>
		</FormItem>
		<Row>
			<Col span="24">
			<Button type="primary" @click="onForm">操作</Button>
			</Col>
		</Row>
	</Form>
</template>
<script>
export default {
	data() {
		return {
			form: {
				name: '',
				name2: '',
				age: '',
				other: '',
				other2: ''
			},
			form2: {
				name: {
					label: '栏目1',
					value: '',
					placeholder: 'placeholder',
					rule: [
						{
							required: true,
							message: '请输入姓名'
						}
					]
				}
			},
			prop: 'other',
			rules: {
				name: [{
					required: true,
					message: '请输入姓名'
				}],
				age: [{
					required: true,
					message: '请输入年龄'
				}],
				other: [{
					required: true,
					message: '请输入1'
				}],
				other2: [{
					required: true,
					message: '请输入2'
				}]
			}
		}
	},
	methods: {
		changeProp() {
			this.prop = 'other2';
		},
		add() {
			//校验整个表单
			this.$refs['myform'].validate().then(valid => {
				console.log('myform', valid);
			});
			//校验单个prop
			this.$refs['myform'].validateField('name', (errors) => {
				console.log('validField', errors);
			});
		},
		onForm() {
			this.$refs['myform2'].validate().then(valid => {
				console.log('myform', valid);
			});
		}
	},
	mounted() {
		for (const key in this.form) {
			console.log(key);
		}
	}
}
</script>

<style lang="scss" scoped></style>